<template>
    <div class="home">
        <el-scrollbar style="width: 100%; height: 100%;">
            <div class="summaryWrap">
                <div class="dataItem">
                    <div class="dataItemWrap">
                        <div class="dataTitle">
                            <span>{{ $t('home.xshz') }}</span>
                            <span class="status status1">{{ $t('home.lj') }}</span>
                        </div>
                        <div class="dataContent">
                            <div class="dataLine">
                                <div class="key">{{ $t('home.zxse') }}：</div>
                                <div class="value">
                                    <span>{{ summary1.data1 }}</span>
                                    <span>万元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.ndxse') }}：</div>
                                <div class="value">
                                    <span>{{ summary1.data2 }}</span>
                                    <span>万元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.zqk') }}：</div>
                                <div class="value">
                                    <span class="textRed">{{ summary1.data3 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.ycqhk') }}：</div>
                                <div class="value">
                                    <span class="textRed">{{ summary1.data4 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.bydqhk') }}：</div>
                                <div class="value">
                                    <span class="textRed">{{ summary1.data5 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.wdqhk') }}：</div>
                                <div class="value">
                                    <span>{{ summary1.data6 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dataItem">
                    <div class="dataItemWrap">
                        <div class="dataTitle">
                            <span>{{ $t('home.hkhz') }}</span>
                            <span class="status status2">{{ $t('home.hzsj') }}</span>
                        </div>
                        <div class="dataContent">
                            <div class="dataLine">
                                <div class="key">{{ $t('home.zhk') }}：</div>
                                <div class="value">
                                    <span>{{ summary2.data1 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.ndxse') }}：</div>
                                <div class="value">
                                    <span>{{ summary2.data2 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.zqk') }}：</div>
                                <div class="value">
                                    <span>{{ summary2.data3 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.ycqhk') }}：</div>
                                <div class="value">
                                    <span>{{ summary2.data4 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="memberWrap">
                <div class="dataItem" v-for="(item, index) in memberList" :key="index">
                    <div class="dataItemWrap">
                        <div class="dataTitle">
                            <span>{{ item.name }}</span>
                            <span class="status" :class="['status'+ (index + 1)]">{{ $t('home.tj') }}</span>
                        </div>
                        <div class="dataContent">
                            <div class="dataLine">
                                <div class="key">{{ $t('home.zxse') }}：</div>
                                <div class="value">
                                    <span>{{ item.data1 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.ndxse') }}：</div>
                                <div class="value">
                                    <span>{{ item.data2 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.zqk') }}：</div>
                                <div class="value">
                                    <span class="textRed">{{ item.data3 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.cqhk') }}：</div>
                                <div class="value">
                                    <span class="textRed">{{ item.data4 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.bydqhk') }}：</div>
                                <div class="value">
                                    <span class="textRed">{{ item.data5 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.wdqhk') }}：</div>
                                <div class="value">
                                    <span>{{ item.data6 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.zhk') }}：</div>
                                <div class="value">
                                    <span>{{ item.data7 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.ndhk') }}：</div>
                                <div class="value">
                                    <span>{{ item.data8 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.byhk') }}：</div>
                                <div class="value">
                                    <span>{{ item.data9 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                            <div class="dataLine">
                                <div class="key">{{ $t('home.bzhk') }}：</div>
                                <div class="value">
                                    <span>{{ item.data10 }}</span>
                                    <span>元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="statisticsWrap">
                <div class="dataItem" v-for="(item, index) in statistics" :key="index">
                    <div class="dataItemWrap">
                        <div class="dataTitle">
                            <span>{{ item.name }}</span>
                            <span class="status" :class="item.status">{{ item.statusText }}</span>
                        </div>
                        <div class="dataValue">
                            <span class="value">{{ item.value }}</span>
                            <span class="unit">{{ item.unit }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="orderWrap">
                <div class="orderContent">
                    <div class="dataTitle">
                        <span>{{ $t('common.order') }}</span>
                        <div class="filter">
                            <span class="filterItem">{{ $t('common.filterDay') }}</span>
                            <span class="filterItem">{{ $t('common.filterMonth') }}</span>
                            <span class="filterItem">{{ $t('common.filterYear') }}</span>
                        </div>
                    </div>
                    <div class="orderCharts"></div>
                </div>
            </div>
            <div class="listWrap">
                <div class="listContent">
                    <div class="dataTitle">
                        <span>{{ $t('home.yhxmlb') }}</span>
                        <div class="filter"></div>
                    </div>
                    <div class="listItem title">
                        <div class="itemTd">{{ $t('home.status') }}</div>
                        <div class="itemTd">{{ $t('home.date') }}</div>
                        <div class="itemTd">{{ $t('home.user') }}</div>
                        <div class="itemTd">{{ $t('home.value') }}</div>
                    </div>
                    <div class="listItem" v-for="(item, index) in 10" :key="index">
                        <div class="itemTd">{{'状态'+ index}}</div>
                        <div class="itemTd">{{'日期'+ index}}</div>
                        <div class="itemTd">{{'用户'+ index}}</div>
                        <div class="itemTd">{{'值'+ index}}</div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<style lang="sass" scoped>
@import "./home.scss"
</style>
<script src="./home.js"></script>
